package app.delish.details

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.slideInVertically
import androidx.compose.animation.slideOutVertically
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.calculateEndPadding
import androidx.compose.foundation.layout.calculateStartPadding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowUp
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.derivedStateOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import app.delish.compose.ui.AppBarIcon
import kotlinx.coroutines.launch
import kotlinx.coroutines.CoroutineScope

@Composable
fun DetailsTopBar(
    contentPadding: PaddingValues = PaddingValues(16.dp),
    scrollToTop: suspend CoroutineScope.() -> Unit,
    firstVisibleItemIndex: () -> Int,
    onOptionsClicked: () -> Unit
) {

    val visible by remember { derivedStateOf { firstVisibleItemIndex() > 0 } }
    AnimatedVisibility(
        visible = visible,
        enter = slideInVertically(initialOffsetY = { -it }),
        exit = slideOutVertically(targetOffsetY = { -it })
    ) {
        // 垂直布局容器（整体背景与主题一致）
        Column(
            modifier = Modifier
                .background(color = MaterialTheme.colors.background)
                .fillMaxWidth()
        ) {
            // 水平布局：三部分内容（返回/标题/菜单）
            Row (
                modifier = Modifier
                    .background(color = MaterialTheme.colors.background)
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween  // 均匀分布
            ){
                // 创建协程作用域（用于执行scrollToTop）
                val composableScope = rememberCoroutineScope()

                // 返回顶部按钮
                AppBarIcon(
                    imageVector = Icons.Filled.KeyboardArrowUp,  // 向上箭头图标
                    contentDescription = stringResource(R.string.go_to_details),  // 无障碍描述
                    modifier = Modifier
                        .align(Alignment.CenterVertically)  // 垂直居中
                        .padding(
                            start = contentPadding.calculateStartPadding(LayoutDirection.Rtl),  // 右到左适配
                            top = contentPadding.calculateTopPadding(),
                            bottom = contentPadding.calculateBottomPadding(),
                        ),
                    onClicked = {
                        // 点击后滚动到顶部
                        composableScope.launch(block = scrollToTop)
                    }
                )
                // 居中标题文本
                Text(
                    text = "Details",  // 标题文本
                    fontSize = 16.sp,   // 中等字号
                    fontWeight = FontWeight.Normal,  // 正常字重
                    modifier = Modifier.padding(
                        top = contentPadding.calculateTopPadding(),
                        bottom = contentPadding.calculateBottomPadding()
                    )
                )

                // 右侧选项按钮
                OptionIcon(
                    modifier = Modifier
                        .align(Alignment.CenterVertically)  // 垂直居中
                        .padding(
                            end = contentPadding.calculateEndPadding(LayoutDirection.Rtl),  // 右到左适配
                            top = contentPadding.calculateTopPadding(),
                            bottom = contentPadding.calculateBottomPadding()
                        ),
                    onOptionsClicked
                )
            }
            // 分隔线（使用主题背景色）
            Spacer(
                modifier = Modifier
                    .height(1.dp)
                    .fillMaxWidth()
                    .background(MaterialTheme.colors.background)
            )
        }

    }
}
